<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客留言板</title>
    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
    <link rel="stylesheet" href="/res/css/message.css">
    <link rel="stylesheet" href="/view/tags/footer.css">
    <link rel="stylesheet" href="/view/tags/nav.css">
    <script src="/view/tags/nav.js" defer></script>
</head>
<body>
    <div class="navigation">
    </div>
    
    <div class="top-section">
        <div class="top-background">
            <div class="top-sign-0">留言板</div>
            <div class="top-sign-1">分享你的想法与建议</div>
        </div>
    </div>

    <div class="main-content">
        <div class="content-container">
            <div class="message-form">
                <h2>发表留言</h2>
                <form id="commentForm">
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name" name="name" required placeholder="请输入您的姓名">
                    </div>
                    
                    <div class="form-group">
                        <label for="email">邮箱</label>
                        <input type="email" id="email" name="email" required placeholder="请输入您的邮箱">
                    </div>
                    
                    <div class="form-group">
                        <label for="message">留言内容</label>
                        <textarea id="message" name="message" rows="4" required placeholder="请分享您的想法或建议..."></textarea>
                    </div>
                    
                    <div class="form-group">
                        <label for="contact">其他联系方式（选填）</label>
                        <input type="text" id="contact" name="contact" placeholder="如微信、QQ等">
                    </div>
                    
                    <button type="submit" class="submit-button">
                        <span>提交留言</span>
                    </button>
                </form>
                
                <!-- 提示信息显示区域 -->
                <div id="messageTip" class="message-tip"></div>
            </div>
            
            <div class="messages">
                <h2>留言列表</h2>
                <div id="commentsContainer">
                    <!-- 留言将通过JavaScript动态添加 -->
                </div>
            </div>
        </div>
    </div>

    <div id="footer"></div>
    
    <script>
        (async () => {
            const response = await fetch('/view/tags/footer.html');
            const data = await response.text();
            document.getElementById('footer').innerHTML = data;
        })();
    </script>
    <script src="/res/js/message.js" type="module"></script>
</body>
</html>